<template>
    <div class="com-box">
        <h4>发表评论</h4>
        <hr>
        <textarea placeholder="请输入要评论的内容(最多吐槽120个字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postComment">提交评论</mt-button>
        <div class="com-list">
            <div class="com-item" v-for="(item,i) in comments" :key="item.add_time">
                <div class="com-title">
                    第{{i+1}}楼&nbsp;用户:{{item.user_name}}&nbsp;发表时间:{{item.add_time}}
                </div>
                <div class="com-content">
                    {{item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain>加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            comments:[],
            msg:""
        }
    },
    created(){
        this.getComments()
    },
    methods:{
        getComments(){
            this.$http.get("/json/newsInfo/"+this.id+"/comment.txt").then(result=>{
                var dataStr=JSON.parse(result.bodyText)
                if(dataStr.status==0)
                {
                    this.comments=this.comments.concat(dataStr.message)
                }
            },function(){
                Toast("加载失败")
            })
        },
        postComment(){
            if(this.msg.trim().length==0)
            {
                return Toast("请输入评价内容")
            }
            this.$http.post("插入评论数据的接口地址",{content:this.msg},{emulateJSON:true}).then(result=>{
                if(result.status==0)
                {
                  var list={user_name:"eew",add_time:"2020-12-33 18:12:33",content:this.msg}
                  this.comments.unshift(list)
                }
            },function(){
                Toast("评论失败")
            })
        }
    },
    props:['id']
}
</script>

<style scoped>
.com-box textarea
{
     margin: 0;
     height: 100px;
}
.com-list
{
    margin: 5px 0;
}
.com-title
{ 
    background-color: #cccccc;
    font-size: 14px;
    line-height: 35px;
}
.com-content
{
    font-size: 16px;
    line-height: 35px;
    text-indent: 2em;
}
</style>